<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


    <link rel="stylesheet" href="${APP_PATH}/static/css/signin.css">

</head>
<body class="text-center">

<form id="checkTel" class="form-signin px-5 bg-white rounded shadow">
    <img class="mb-4" src="${APP_PATH}/images/logo.jpg" alt="logo" width="200px">
    <h1 class="h3 mb-3 font-weight-normal">请输入注册的手机号&nbsp;&nbsp;<span class="btn display-4">返回<a
            href="${APP_PATH}/login">登录</a></span></h1>

    <label for="inputTel" class="sr-only">请输入手机号</label>
    <input type="tel" id="inputTel" class="form-control" placeholder="手机号" onkeyup="value=value.replace(/[^\d]/g,'')"
           maxlength="11" required autofocus>

    <br/>
    <button id="next-btn" class="btn btn-lg btn-primary btn-block" type="button">下一步</button>
    <br/>
</form>

<form id="changePassword" class="form-signin px-5 bg-white rounded shadow" style="display: none">
    <h1 class="h3 my-3 font-weight-normal">请输入新密码&nbsp;&nbsp;&nbsp;<span class="btn display-4">返回<a
            href="${APP_PATH}/login">登录</a></span></h1>
    <%--用户输入的手机号--%>
    <input type="hidden" id="tel" name="tel">
    <label for="password" class="sr-only">请输入新密码</label>
    <input type="password" id="password" class="form-control" placeholder="新密码"
           maxlength="16" name="password" required autofocus>

    <label for="confirmPassword" class="sr-only">请再次输入新密码</label>
    <input type="password" id="confirmPassword" class="form-control" placeholder="重复密码" maxlength="16" required>

    <label for="inputCode" class="sr-only">请输入验证码</label>
    <input type="text" id="inputCode" class="form-control" placeholder="验证码" name="code" maxlength="10" required>

    <div class=" mb-3 float-left">
        <a id="getCode" onclick="sendSMS(this)" class="btn btn-sm btn-info">获取验证码</a>
    </div>
    <button id="submit-btn" class="btn btn-lg btn-primary btn-block" type="button">提交</button>
    <br/>
</form>

</body>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>

<script>
    //正则验证字段
    function validate1() {
        var regex_tel = /^1[0-9]{10}$/;
        if (!regex_tel.test($("#inputTel").val())) {
            toastr.error("你的手机号填写格式不正确，请重试！");
            return false;
        }
        return true;
    }
    //正则验证字段
    function validate2() {
        var regex_password = /^[a-zA-Z0-9]{8,16}$/;
        var regex_tel = /^1[0-9]{10}$/;
        if (!regex_tel.test($("#tel").val())) {
            toastr.error("你的手机号填写格式不正确，请重试！");
            return false;
        }
        if ($("input[name='code']").val() === '') {
            toastr.error("验证码不能为空！");
            return false;
        }
        if (!regex_password.test($("input[name='password']").val())) {
            toastr.error("密码格式不正确，由8-16位字母或数字组成");
            return false;
        }
        //校验重复密码和新密码是否一致
        if($("input[name='password']").val()!==$("#confirmPassword").val()){
            toastr.error("重复密码和新密码不一致！");
            return false;
        }
        return true;
    }

    //下一步
    $("#next-btn").click(function () {
        if(validate1()){
            //该手机号可以提交到后台
            var tel=$("#inputTel").val();
            $.ajax({
                url:"/existTel",
                method:"POST",
                data:{tel:tel},
                success:function (result) {
                    if (result.code === 100) {
                        //保存该手机号，并跳转到下一步
                        $("#tel").val(tel);
                        //隐藏表单1，显示表单2
                        $("#checkTel").hide();
                        $("#changePassword").show();
                    }else{
                        //该手机号还没有注册，请先注册！！
                        toastr.error(result.extend.error);
                    }
                }
            });
        }
    });

    //用户获取手机验证码
    var t=60;
    function waitCodeProcessing() {
        t--;
        $("#getCode").text(t+"秒后重新获取");
        if (t === 0) {
            t=60;
            //允许点击
            $("#getCode").text("重新获取");
            $("#getCode").removeClass("disabled");
        } else {
            //每秒执行一次
            setTimeout('waitCodeProcessing()', 1000);
        }
    }
    //点击获取验证码
    function sendSMS() {
        //获取手机号，发送验证码
        var tel=$("input[name='tel']").val();
        var regex_tel = /^1[0-9]{10}$/;

        if (!regex_tel.test(tel)) {
            toastr.error("你的手机号填写格式不正确，请重试！");
            return false;
        }else{
            //修改获取验证码按钮状态为不可点击
            $("#getCode").addClass("disabled");
            //开始计时
            waitCodeProcessing();

            //发送异步请求，发送验证码
            $.ajax({
                url: "/sendCode-findPassword",
                type: "POST",
                data: {tel:tel},
                success: function (result) {
                    if (result.code === 100) {
                        toastr.success("短信发送成功！");
                    }else{
                        toastr.error(result.extend.error);
                    }
                }
            });
        }
    }

    //用户提交
    $("#submit-btn").click(function () {
        if(validate2()){
            //数据校验成功
            var tel=$("#tel").val();
            var code=$("#inputCode").val();
            var password=$("#password").val();
            $.ajax({
                url:'/findPassword',
                method:'POST',
                data:{tel:tel,password:password,code:code},
                success:function (result) {
                    if(result.code===100){
                        //修改密码成功，请重新登录！！
                        toastr.success("修改密码成功，请重新登录！！");
                        window.location.href = "/exit";
                    }else{
                        //修改密码失败，请稍后重试！！！
                        toastr.error(result.extend.error);
                    }
                }
            });
        }
    });
</script>

</html>
